<template>
    <div class="home" v-loading="loading">
        <div class="home-btn">
            <span class="add-notice"><i class="iconfont icon-ruijiaoyan-biaotixiangqing"></i>最多可添加10个测试</span>
           <el-button :disabled="list?.length >= 10"  class="srt-el-button srt-el-button--primary srt-el-button-h32 btn" type="primary" @click="addTest" :loading="loading">+添加测试</el-button>
        </div>
        <div class="selected-mooc-list" v-if="list.length">
            <el-table :data="list" border style="width: 100%" class="srt-border-table" empty-text="还没有添加测试" :span-method="arraySpanMethod">
                <el-table-column type="index" label="序号" width="70" />
                <el-table-column prop="cover" label="测试名称" width="505">
                    <template #default="scope">
                        <div>
                            <Ellipsis v-if="!scope.row.editing" :content="scope.row.title" :rows="1" :lineHeight="22"/>
                            <div class="test-tag test-editing" v-if="scope.row.editing" @click.stop>
                                <el-form
                                    ref="ruleFormRef"
                                    :model="scope.row"
                                    label-width="0px"
                                    class="test-form"
                                    @validate="(prop, isValid) => testValidate(isValid, scope.row)"
                                    @submit.prevent
                                >
                                    <el-form-item label="" prop="title" :rules="[{min: 2, max: 30, message: `请输入2~30个字`,trigger: 'blur'}]">
                                        <el-input
                                            class="edit-input" 
                                            type="text" 
                                            maxlength="30" 
                                            show-word-limit 
                                            v-model="scope.row.title" 
                                            placeholder="请输入" 
                                            v-focus
                                            clearable
                                        />
                                    </el-form-item>
                                </el-form>
                                <div class="ope-btn">
                                    <el-button class="srt-el-button srt-el-button--link srt-el-button-h28" @click="update(scope.row)">确定</el-button>
                                    <el-button class="srt-el-button srt-el-button--link srt-el-button-h28" @click="cancelUpdate(scope.row)">取消</el-button>
                                    <el-button class="srt-el-button srt-el-button--link srt-el-button-h28" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="题目数量" width="100">
                    <template #default="scope">
                        <div>
                            {{scope.row.questionCount || 0}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <div class="btn-box">
                            <el-button class="srt-el-button srt-el-button--link srt-el-button-h28" @click="rename(scope.row, scope.$index)">重命名</el-button>
                            <el-button class="srt-el-button srt-el-button--link srt-el-button-h28" @click="manage(scope.row)">编辑题目</el-button>
                            <el-button class="srt-el-button srt-el-button--link srt-el-button-h28" @click="detail(scope.row)">查看</el-button>
                            <el-button class="srt-el-button srt-el-button--link srt-el-button-h28" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
                <template #empty>
                    <div class="t-empty-wrap">
                        <NoData info="还没有测试，添加一个测试吧" url="no-course.png" />
                        <!-- <el-button class="srt-el-button srt-el-button-h32 select-mooc-btn add-mooc-btn" @click="selectMooc">选择慕课</el-button> -->
                    </div>
                </template>
            </el-table>
        </div>
        <div class="t-empty-wrap" v-else>
            <NoData info="还没有测试，添加一个测试吧" url="no-course.png" />
            <!-- <el-button class="srt-el-button srt-el-button-h32 select-mooc-btn add-mooc-btn" @click="selectMooc">选择慕课</el-button> -->
        </div>
    </div>
</template>

<script setup>
import NoData from '@/components/no-data.vue';
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import Confirm from '@/components/confirm/confirm.js'
import Ellipsis from '@/components/ellipsis.vue';
import { pageJump } from '@/global/location-transfer.js';
import { jumpHref } from '@/router/jumpHref';

const route = useRoute();

const list = ref([]);
const testConfig = {
    compulsory: 0,
    isUserRepeat: 0,
    moocId: route.params.moocId,
    title: '未命名'
}

function addTest() {
    loading.value = true;
    let testConfig = {
        compulsory: 0,
        isUserRepeat: 0,
        moocId: route.params.moocId,
        title: '未命名'
    }
    G_transmit('moocAddTest', {
        data: testConfig
    }).then((res) => {
        console.log('res', res)
        G_dispatchEvent('toast', { message: '添加成功', type: 'success'});
        getList(res.data);
    }).catch((_err) => {
        console.log(_err)
    }).finally(() => {
        loading.value = false
    })
}

// 更新作业列表
function updateList() {
    getList();
}

const loading = ref(false);

function getList(id) {
    // loading.value = true;
    G_transmit('moocAssessList', {
        data: {
            moocId: route.params.moocId,
            pageIndex: 1,
            pageSize: 20
        }
    })
    .then((res) => {
        console.log('rows', res)
        list.value = res.data?.rows || [];
        list.value.forEach(item => {
            if(item.id === id) {
                item.prevTitle = item.title
                item.editing = true
            }
        })
    })
    .catch((_err) => {
        console.log(_err)
    }).finally(() => {
        loading.value = false;
    });
}


function handleDelete(item, index) {
    console.log('item', item, index)

    Confirm(
        { 
            title: '删除测试', 
            text: '学员作答数据将一并删除且不可恢复，确认删除吗？'
        }
    )
    .then(ret => {
        G_transmit('moocDeleteTest', {
            queries: {
                id: item.id
            }
        }).then((res) => {
            G_dispatchEvent('toast', { message: '删除成功', type: 'success'});
            getList();
        }).catch((_err) => {
            console.log(_err)
        })
    })
    .catch(_err => {
        console.log(_err);
    }) 
   
}

function manage(item) {
    pageJump(jumpHref.questionMoocTest.create(item.assessId, '', ''), true);
}

function detail(item) {
    console.log('item', item)
    pageJump(jumpHref.questionMoocTest.detail(item.assessId), true);
}

function rename(item, index) {
    console.log('item', item, index)
    item.prevTitle = item.title
    item.editing = true
}
// 自定义 v-focus，编辑状态时自动聚焦input
const vFocus = {
    mounted: (el) => {
        el.querySelector('input').focus();
    }
}
// 目录名称校验
function testValidate(isValid, data) {
    console.log('isValid', isValid, data)
    data.isNoValidate = !isValid
}

function update(item) {
    item.title = item.title.trim()
    if(!item.title) {
        item.title = '未命名'
    }
    if(item.title.length<2) {
        G_dispatchEvent('toast', { message: '请输入2~30个字的测试名称', type: 'info'});
        return
    }
    
    G_transmit('moocEditTest', {
        data: item
    }).then((res) => {
        G_dispatchEvent('toast', { message: '保存成功', type: 'success'});
        item.editing = false
    }).catch((_err) => {
        console.log(_err)
    })
}

function cancelUpdate(item) {
    item.title = item.prevTitle  
    item.editing = false
}

function arraySpanMethod ({
  row,
  column,
  rowIndex,
  columnIndex,
}) {
    console.log('row', row, column, rowIndex, columnIndex, row.editing)
    if (row.editing) {
        if (columnIndex === 1) {
        return [1,3]
        } else if (columnIndex === 2) {
        return [0, 0]
        } else if (columnIndex === 3) {
        return [0, 0]
        }
    }
}

const spanMethod1 = computed(() => {
    console.log('dd')
})
onMounted(() => {
    getList();
})

</script>

<style lang="scss" scoped>
.home {
    padding-bottom: 40px;
}
.home-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 0px;
    .add-notice {
        margin-right: 12px;
        font-size: 14px;
        color: #666666;
        align-self: center;
        i {
            font-size: 16px;
            line-height: 16px;
            color: #999999;
            margin-right: 4px;
        }
    }
    .btn {
        width: 100px;
        padding-left: 14px;
        padding-right: 14px;
    }
}
:deep(.test-form .el-form-item){
    margin-bottom: 0;
}
.edit-input{
    width: 450px;
    height: 32px;
    margin-right: 16px;
}

.test-tag {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    margin-left: 2px;

    .title {
        flex: 1;
    }
}

.test-editing{
    justify-content: flex-start;
    cursor: default;
    -webkit-user-drag: none;
    input{
        cursor: text;
        user-select: text;
    }
}

:deep(td[colspan="3"]) {
    .cell {
        padding: 16px 20px;
    }
    &:nth-child(2) {
        border-left: none !important;
    }  
}
:deep(td) {
    &:nth-child(1) {
        border-right: none !important;
    }  
    &:nth-child(2) {
        border-left: 1px solid #E0E2E4; 
    }  
}
.btn-box .el-button + .el-button {
    margin-left: 20px;
}
.ope-btn .el-button + .el-button {
    margin-left: 16px;
}
</style>